<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <div class="title">合同详情</div>
      </div>
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" :model="form.model" class="demo">
          <div class="form-section">
            <div class="form-section_title">基础信息</div>
            <!-- <AgelFormDesc :items="form.baseItems" :column="4">
              <template #slot-bonus>
                <div class="w-700">
                  <ContractBonu readonly v-model="form.model.bonus"></ContractBonu>
                  <ContractIncentive readonly ref="contractIncentiveRef" v-model="form.model.incentives">
                  </ContractIncentive>
                </div>
              </template>
            </AgelFormDesc> -->
            <InfoModel :info="form.model"></InfoModel>
          </div>
          <!-- <div class="form-section">
            <div class="form-section_title">分佣信息</div>
            <div class="w-700">
              <ContractBonu readonly v-model="form.model.bonus"></ContractBonu>
              <ContractIncentive readonly ref="contractIncentiveRef" v-model="form.model.incentives"></ContractIncentive>
            </div>
          </div> -->
          <div class="form-section">
            <div class="form-section_title">合同扫描件</div>
            <image-upload v-model="form.model.attachments" :limit="form.model.attachments?.length"></image-upload>
            <!-- <el-form-item prop="attachments">
              <image-upload v-model="form.model.attachments" :limit="100"></image-upload>
            </el-form-item> -->
          </div>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>

  </div>
</template>

<script setup  lang="tsx">
import { getContract } from '@/api/operation/contract/index'
import { BizContractVo, defaultModel } from '@/api/operation/contract/types'
import ImageUpload from '@/components/ImageUpload/index.vue'
import InfoModel from './info-model.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const route = useRoute();
const orderId = toRef<string | null>(route.query.id as string)

const form = reactive({
  model: defaultModel(),
  // baseItems: [
  //   { prop: "contractNo", label: "合同编号" },
  //   { prop: "vendorName", label: "酒店名称", },
  //   { prop: "regionName", label: "省市区", },
  //   { prop: "vendorUser", label: "联系人", },
  //   { prop: "vendorPhone", label: "联系人电话", },
  //   { prop: "signUser", label: "销售负责人" },
  //   {
  //     prop: "validRange", label: "合同生效日期", viewFormat: ({ modelValue }: any) => {
  //       return modelValue || modelValue.length ? parseTime(modelValue[0], '{y}-{m}-{d}') + ' ~ ' + parseTime(modelValue[1], '{y}-{m}-{d}') : '-'
  //     }
  //   },
  //   {
  //     prop: "signTime", label: "签订日期", viewFormat: ({ modelValue }: any) => {
  //       return parseTime(modelValue, '{y}-{m}-{d}')
  //     }
  //   },
  //   {
  //     prop: "settlePeriodType", label: "结算周期",
  //     viewFormat: ({ prop }: any) => {
  //       return (<dict-tag options={settle_period_type.value} value={form.model[prop]} />)
  //     }
  //   },
  //   {
  //     prop: "autoSettleEnabled", label: "是否启用自动结算", span: 4,
  //     viewFormat: ({ modelValue }: any) => {
  //       return (<el-switch activeValue='1' inactiveValue='0' value={modelValue} />)
  //     }
  //   },
  //   {
  //     prop: "bonusInfo", label: "分佣信息", slot: 'slot-bonus', span: 4
  //   },
  // ],
})
const loading = ref(false)

/** 取消 */
const handleCancel = () => {
  // proxy?.$tab.closeOpenPage()
  proxy?.$tab.closePage();
}
const getInfo = async (id: string) => {
  loading.value = true
  let res = await getContract(id)
  loading.value = false
  if (res.code == 200) {
    form.model = res.data
    form.model.validRange = res.data.validFrom && res.data.validTo ? [res.data.validFrom, res.data.validTo] : []
    form.model.attachments = (form.model.attachments || []).map(it => ({ ...it, url: it.ossId, ossId: it.id, fileName: it.name }))

  } else {
    proxy?.$modal.msgError(res.msg || '信息获取失败！')
  }
}
if (orderId.value) {
  getInfo(orderId.value)
}
onMounted(() => {
})
</script>
